<template>
	<view class="container">
		<view class="myorder_top">
			<view class="sscontent">
				<view class="ssbox">
					<view class="iconfont icon-sousuo"></view><input class="ssinp" type="text" @input="ikeyword"
						confirm-type="search" @confirm="search" placeholder="搜索项目、订单编号" />
				</view>
			</view>
		</view>
		<!--没有信息的时候显示-->
		<view class="myorder_no" v-if="rows.length==0">暂无相关信息</view>
		<!--没有信息的时候显示end-->
		<view class="hxlist">
			<block v-for="(item,index) in rows" :key="item.id">
				<navigator hover-class="none" :url="'/pages/user/myorderdetail/myorderdetail?orderid='+item.orderid">
					<view class="hxlist_li">
						<view class="hxlist_name">{{item.shopname}}</view>
						<view class="hxlist_dl">
							<view class="hxlist_dt">订单编号：</view>
							<view class="hxlist_dd">{{item.orderid}}</view>
						</view>
						<view class="hxlist_dl">
							<view class="hxlist_dt">就诊项目：</view>
							<view class="hxlist_dd">{{item.name}}</view>
						</view>
						<view class="hxlist_dl">
							<view class="hxlist_dt">核销时间：</view>
							<view class="hxlist_dd">{{item.hxtime}}</view>
						</view>
					</view>
				</navigator>
			</block>



		</view>
	</view>
</template>

<script>
	import API from "@/common/api.js"
	export default {
		data() {
			return {
				keyword: "",
				rows: []
			}
		},
		onLoad() {
			this.search()
		},
		methods: {
			search() {
				var $this = this
				API.post("common/hxorder", {
					keyword: this.keyword
				}).then((res) => {
					if (res.code == 1) {
						$this.rows = res.data
					}
				})
			},
			ikeyword(e) {
				this.keyword = e.detail.value
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f7f7f7;
	}

	.container {
		padding: 228rpx 0 40rpx;
	}

	.myorder_top {
		position: fixed;
		top: var(--window-top);
		left: 0;
		right: 0;
		background: #fff;
		z-index: 2;
		box-shadow: 0px 8rpx 16rpx 0px rgba(0, 0, 0, 0.02);
	}

	.sscontent {
		width: 100%;
		padding: 24rpx 30rpx;
		box-sizing: border-box;
		overflow: hidden;
		display: flex;
	}

	.ssbox {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 80rpx;
		background: #f6f7f9;
		color: #222;
		font-size: 28rpx;
		position: relative;
		padding: 0 22rpx 0 92rpx;
		border: 2rpx #eee solid;
	}

	.ssbox .iconfont {
		position: absolute;
		top: 0;
		left: 36rpx;
		font-size: 40rpx;
		color: #999;
	}

	.ssinp {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		color: #444;
		font-size: 30rpx;
	}

	.tnameinner {
		background: $color;
		width: 100%;
		padding: 30rpx;
		line-height: 40rpx;
		box-sizing: border-box;
		color: #fff;
		overflow: hidden;
	}

	.tname {
		float: left;
		font-size: 32rpx;
	}

	.tname_ico {
		float: right;
		margin-top: 8rpx;
		position: relative;
		width: 0;
		height: 0;
		border: 12rpx solid;
		border-color: transparent transparent transparent #fff;
	}

	.tname_ico::after {
		content: '';
		position: absolute;
		top: -12rpx;
		left: -16rpx;
		border: 12rpx solid;
		border-color: transparent transparent transparent $color;
	}

	.myorder_no {
		width: 100%;
		overflow: hidden;
		margin-top: 150rpx;
		text-align: center;
		color: #999;
	}

	.hxlist {
		padding: 0 30rpx;
		width: 100%;
		overflow: hidden;
		box-sizing: border-box;
	}

	.hxlist_li {
		width: 100%;
		padding: 30rpx;
		overflow: hidden;
		box-sizing: border-box;
		background: #fff;
		border-radius: 20rpx;
		margin-top: 24rpx;
	}

	.hxlist_name {
		width: 100%;
		overflow: hidden;
		box-sizing: border-box;
		padding-bottom: 26rpx;
		margin-bottom: 26rpx;
		border-bottom: 2rpx #eee solid;
		font-size: 30rpx;
		font-weight: bold;
	}

	.hxlist_dl {
		width: 100%;
		overflow: hidden;
		line-height: 40rpx;
		font-size: 28rpx;
		display: flex;
		padding: 14rpx 0;
	}

	.hxlist_dt {
		width: 180rpx;
		color: #888;
	}

	.hxlist_dd {
		flex: 1;
	}

	/* #ifdef H5 */
	.myorder_top {
		top: 0;
	}

	/* #endif */
</style>